<template>
  <div class="pdf-generation-stats">
    <!-- 任务列表 -->
    <div class="task-list">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>任务列表</span>
            <div class="header-actions">
              
              <span style="    line-height: 21px;color: #5b5757;font-size: 14px;">自动刷新</span>
              <el-switch v-model="refreshType" style=""></el-switch>
              <span v-if="refreshType" style="line-height: 21px;color: #5b5757;font-size: 14px;margin-right: 10px;">{{ countdown }}秒后刷新</span>
              <el-button type="primary" @click="refreshTasks" :loading="loading" size="mini">
                <el-icon>
                  <Refresh />
                </el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>
        <el-table :data="taskList" v-loading="loading" stripe @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column prop="taskId" label="任务ID" width="200" show-overflow-tooltip />
          <el-table-column prop="taskType" label="任务类型" width="150">
            <template #default="{ row }">
              <el-tag :type="getTaskTypeTagType(row.taskType)">
                {{ getTaskTypeName(row.taskType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="taskStatus" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.taskStatus)">
                {{ getStatusName(row.taskStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="进度" width="120">
            <template #default="{ row }">
              <el-progress :percentage="row.progress || 0" :status="getProgressStatus(row.taskStatus)"
                :stroke-width="8" />
            </template>
          </el-table-column>
          <el-table-column prop="currentStep" label="当前步骤" min-width="200" show-overflow-tooltip >
            <template #default="{ row }" >
              <el-button  type="text" :underline="false" @click="viewStepDetail(row)">
              {{ row.currentStep }}
              </el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="fileSize" label="文件大小" width="120">
            <template #default="{ row }">
              {{ formatFileSize(row.fileSize) }}
            </template>
          </el-table-column> -->
          <el-table-column prop="startTime" label="开始时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewTaskDetail(row)">
                查看详情
              </el-button>
              <el-button  type="success" size="small"
              :disabled="row.taskStatus !== 'COMPLETED'"
                @click="downloadFile(row)">
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <!-- <div class="pagination-container">
          <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div> -->
      </el-card>
    </div>
    
    <!-- 任务详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="任务详情" width="80%" :close-on-click-modal="false">
      <div v-if="currentTask" class="task-detail">
        <!-- 基本信息 -->
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="任务ID">{{ currentTask.taskId }}</el-descriptions-item>
          <el-descriptions-item label="任务类型">
            <el-tag :type="getTaskTypeTagType(currentTask.taskType)">
              {{ getTaskTypeName(currentTask.taskType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="任务状态">
            <el-tag :type="getStatusTagType(currentTask.taskStatus)">
              {{ getStatusName(currentTask.taskStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="进度">
            <el-progress :percentage="currentTask.progress || 0" :status="getProgressStatus(currentTask.taskStatus)" />
          </el-descriptions-item>
          <el-descriptions-item label="当前步骤">{{ currentTask.currentStep }}</el-descriptions-item>
          <el-descriptions-item label="总步骤数">{{ currentTask.totalSteps }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ formatDateTime(currentTask.startTime) }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ formatDateTime(currentTask.endTime) }}</el-descriptions-item>
          <el-descriptions-item label="文件名" :span="2">{{ currentTask.fileName || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="文件大小">{{ formatFileSize(currentTask.fileSize) }}</el-descriptions-item>
          <el-descriptions-item label="错误信息" :span="2" v-if="currentTask.errorMessage">
            <el-text type="danger">{{ currentTask.errorMessage }}</el-text>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 步骤详情 -->
        <div v-if="currentTask.steps && currentTask.steps.length > 0" class="steps-section">
          <h4>执行步骤</h4>
          <el-timeline>
            <el-timeline-item v-for="step in currentTask.steps" :key="step.stepIndex"
              :timestamp="formatDateTime(step.startTime)" :type="getStepTimelineType(step.stepStatus)">
              <el-card>
                <h4>{{ step.stepName }}</h4>
                <p>{{ step.stepDescription }}</p>
                <div class="step-status">
                  <el-tag :type="getStepStatusTagType(step.stepStatus)">
                    {{ getStepStatusName(step.stepStatus) }}
                  </el-tag>
                  <span v-if="step.endTime" class="step-duration">
                    耗时: {{ calculateDuration(step.startTime, step.endTime) }}
                  </span>
                </div>
                <div v-if="step.errorMessage" class="step-error">
                  <el-text type="danger">{{ step.errorMessage }}</el-text>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 子任务文件列表 -->
        <div v-if="subtaskFiles && subtaskFiles.length > 0" class="subtask-files">
          <h4>生成文件</h4>
          <el-table :data="subtaskFiles" stripe>
            <el-table-column prop="subtaskName" label="子任务名称" />
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column prop="fileSize" label="文件大小" width="120">
              <template #default="{ row }">
                {{ formatFileSize(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column prop="subtaskStatus" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getSubtaskStatusTagType(row.subtaskStatus)">
                  {{ getSubtaskStatusName(row.subtaskStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button v-if="row.subtaskStatus === 'COMPLETED' && row.ossUrl" type="primary" size="small"
                  @click="downloadSubtaskFile(row)">
                  下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
      <div class="page-bottom">
      <div class="sel-box">
        <el-button @click="startGenerate" type="primary" :disabled="taskList.length?taskList[0].progress!==100:false" v-if="taskList.length?taskList[0].progress!==100:true" :loading="taskList.length?taskList[0].progress!==100:false">


          {{taskList.length?taskList[0].progress!==100?'生成中':'开始生成':'开始生成'}}

        </el-button>

        <el-button @click="regenerateAll" type="danger" :disabled="taskList.length?taskList[0].progress!==100:false" v-if="taskList.length?taskList[0].progress==100:false">重新生成</el-button>



        <!-- <el-button type="danger">删除结果</el-button> -->
      </div>
      <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" /> -->
    </div>
    <!-- 步骤列表弹框 -->
    <el-dialog :visible.sync="stepDetailDialogVisible" title="步骤详情" width="80%" :close-on-click-modal="false">
       <el-table :data="currentStepDetail"  stripe>
          <el-table-column prop="stepIndex" label="顺序" width="200" show-overflow-tooltip />
          <el-table-column prop="stepName" label="步骤名称" width="200" show-overflow-tooltip />
          <el-table-column prop="stepStatus" label="步骤状态" width="200" show-overflow-tooltip >
            <template #default="{ row }">
              <el-tag :type="getStepStatusTagType(row.stepStatus)">
                {{ getStepStatusName(row.stepStatus) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="startTime" label="开始时间" width="200" show-overflow-tooltip />
          <el-table-column prop="endTime" label="结束时间" width="200" show-overflow-tooltip />
          <el-table-column prop="stepDescription" label="步骤描述" width="200" show-overflow-tooltip />
          <el-table-column prop="errorMessage" label="错误信息" width="200" show-overflow-tooltip />

        </el-table>
    </el-dialog>
    <!-- 查看学校及学科进度表格弹框 -->
    <el-dialog :visible.sync="progressDialogVisible" title="学校及学科进度" width="80%" :close-on-click-modal="false" >
      <el-table :data="progressData" stripe height="600">
        <el-table-column prop="subtaskName" label="子任务名称" width="200" show-overflow-tooltip />
        <el-table-column prop="subtaskType" label="任务类型" width="100" show-overflow-tooltip >
          <template #default="{ row }">
            {{ getTaskTypeName(row.subtaskType) }}
            
          </template>
        </el-table-column>
        <el-table-column prop="subtaskStatus" label="状态" width="120" align="center">

            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.subtaskStatus)">
                {{ getStatusName(row.subtaskStatus) }}
              </el-tag>
            </template>
          </el-table-column>
        <el-table-column prop="fileSize" label="文件大小" width="120">
            <template #default="{ row }">
              {{ formatFileSize(row.fileSize) }}
            </template>
          </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="200" show-overflow-tooltip />
        <el-table-column prop="endTime" label="结束时间" width="200" show-overflow-tooltip />
        <el-table-column prop="errorMessage" label="错误信息" width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right" align="center">
            <template #default="{ row }">
              <el-button  type="success" size="small"
              :disabled="row.subtaskStatus !== 'COMPLETED'"
                @click="downloadSubtaskFile(row)">
                下载
              </el-button>
              <!-- <el-button  type="danger" size="small"

              :disabled="['PENDING','PROCESSING'].includes(row.subtaskStatus)"
                @click="regenerate(row)">
                重新生成
              </el-button> -->
            </template>
          </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getExamList,
  getExamTasks,
  getTaskProgress,
  getTaskFiles,
  getExamDownloadStats,
  startGeneratePdfBatch,
  getStepList,
  downloadTaskZip,
  serializeProcesses,
  downloadExamPdfsAsZip,
  downloadPdfByOssUrl,
  getExamPdfReport,
  getSchoolPdfReport,
  getSubjectPdfReport

} from '@/api/xmgl/cjgl'

// import PdfStatsCharts from './PdfStatsCharts.vue'
export default {
  name: 'PdfGenerationStats',
  components: {
    // PdfStatsCharts
  },
  props: {
    xmxx: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      countdown: 3,
      refreshType: false,//自动刷新
      // 步骤详情弹窗
      stepDetailDialogVisible: false,
      currentStepDetail: [],
      // 学校及学科进度弹窗
      progressDialogVisible: false,
      progressData: [],

      loading: false,
      downloadLoading: false,
      examList: [],
      taskList: [],
      totalTaskStats: null,
      fileStats: null,
      total: 0,
      selectedTasks: [],
      detailDialogVisible: false,
      currentTask: null,
      queryParams: {
        examId: null,
        pageNum: 1,
        pageSize: 20
      },
      generationStatus: false,
      refreshInterval: null,
    }
  },
  computed: {
    selectedExamId() {
      return this.xmxx.id
    }
  },
  watch: {
    'taskList.length'(newVal, oldVal){
      if (newVal == 0) {
        this.generationStatus = false
      } else {
        this.generationStatus = true
      }
    },
    refreshType(newVal, oldVal){
      if (newVal) {
        this.loadTaskStats()
        this.refreshInterval = setInterval(() => {
          this.countdown--
          if (this.countdown == 0) {
            this.countdown = 3
              this.loadTaskStats()
          }
        },1000)
      } else {
        clearInterval(this.refreshInterval)
      }
    }
  },
  mounted() {
      this.loadTaskStats()
    // this.loadExamList()
  },
  destroyed() {
    console.log('组件销毁时清除刷新定时器');
    
    clearInterval(this.refreshInterval)
  },
  methods: {
    // 加载考试列表
    async loadExamList(){
      try {
        const response = await getExamList(this.queryParams)

        this.examList = response.data || []
      } catch (error) {
        this.$message.error('加载考试列表失败')

      }
    },

    // 考试选择变化
     handleExamChange(examId){
      if (examId) {
        this.xmxx.id = examId
        this.loadTaskStats()
      } else {
        this.resetStats()
      }
    },

    // 查询任务
     handleQuery(){
      if (!this.xmxx.id) {
        this.$message.warning('请先选择考试')
        return
      }
      this.loadTaskStats()
    },

    // 重置查询
     resetQuery(){
      this.xmxx.id = null
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 20
      this.resetStats()
    },

    // 重置统计数据
     resetStats(){
      this.totalTaskStats = null
      this.fileStats = null
      this.taskList = []
      this.total = 0
    },


    // 加载任务统计
    async loadTaskStats(){
      this.loading = true
      try {
        const [tasksResponse, statsResponse] = await Promise.all([
          getExamTasks(this.xmxx.id),
          getExamDownloadStats(this.xmxx.id)
        ])
        this.$nextTick(()=>{
          this.taskList = tasksResponse.data || []
          this.fileStats = statsResponse.data || {}
          
          // 计算总任务统计
          this.calculateTotalTaskStats()
          
        this.total = this.taskList.length
        })
      } catch (error) {
        this.$message.error('加载任务统计失败')
        console.error('加载任务统计失败:', error)
      } finally {
        this.loading = false
      }
    },

    // 计算总任务统计
    calculateTotalTaskStats(){
      const stats = {
        totalTasks: this.taskList.length,
        completedTasks: 0,
        processingTasks: 0,
        failedTasks: 0
      }

      this.taskList.forEach(task => {
        switch (task.taskStatus) {
          case 'COMPLETED':
            stats.completedTasks++
            break
          case 'PROCESSING':
            stats.processingTasks++
            break
          case 'FAILED':
            stats.failedTasks++
            break
        }
      })

      this.totalTaskStats = stats
    },

    // 刷新任务列表
     refreshTasks(){
        this.loadTaskStats()
    },
    // 查看步骤详情
    async viewStepDetail(step){
      this.stepDetailDialogVisible = true
      this.detailDialogVisible = true
       getStepList(step.taskId).then(res=>{
        this.currentStepDetail = res.data.steps || []

      })

    },
    // 查看任务详情
    async viewTaskDetail(task){
      // 加载任务详细进度
      serializeProcesses(task.taskId).then(res=>{
        this.progressData = res.data.subtasks.filter(item=>item.subtaskType !== 'JOINT_EXAM_OVERVIEW') || []
      })
      this.progressDialogVisible = true
    },
    // 重新生成所有任务
    regenerateAll(){
      this.$confirm('确认重新生成所有任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用重新生成接口
        this.$message.info('重新生成所有任务中...')
        startGeneratePdfBatch({examId:this.xmxx.id}).then(res=>{
          this.$message.success('重新生成所有任务成功')
          this.loadTaskStats()
        }).catch(err=>{
          this.$message.error('重新生成所有任务失败')
          console.error('重新生成所有任务失败:', err)
        })
        setTimeout(() => {
          this.loadTaskStats()
        }, 1000);
      }).catch(() => {
        this.$message.info('已取消重新生成所有任务')
      })
    },
    // 重新生成
    regenerate(task){
      switch (task.subtaskType) {
        case 'JOINT_EXAM_OVERVIEW':
          console.log('重新生成联考总览PDF');

          
          getExamPdfReport({examId:this.xmxx.id})  // 生成联考总览PDF
          break
        case 'SCHOOL_REPORT':
          console.log('重新生成单校报告PDF');

          
          getSchoolPdfReport({examId:this.xmxx.id,schoolId:task.subtaskId})  // 生成单校报告PDF

          break
        case 'SUBJECT_REPORT':
          console.log('重新生成联考单学科PDF');

          
          getSubjectPdfReport({examId:this.xmxx.id,examSubjectId:task.subtaskId})  // 生成联考单学科PDF

          break
        default:
          break
      }
      serializeProcesses(task.taskId).then(res=>{
        this.progressData = res.data.subtasks || []
      })
    },

    // 下载文件
    downloadFile(task){
      downloadTaskZip(task.taskId).then(res=>{
        const link = document.createElement('a')
        link.href = URL.createObjectURL(res.data)
        // 获取content-disposition的文件名
        const contentDisposition = res.headers['content-disposition']
        // 文件名编码了，需要解码
        let fileName = task.fileName || 'download.zip'
        if (contentDisposition) {
          fileName = decodeURIComponent(contentDisposition.split('filename=')[1].trim().replace(/"/g, ''))
        }
        link.download = fileName
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(err=>{
        this.$message.error('下载失败')
        console.error('下载失败:', err)
      })
      
    },

    // 下载子任务文件
    downloadSubtaskFile(subtask){
      if (!subtask.ossUrl) {
        this.$message.warning('文件链接不存在')
        return
      }

      const link = document.createElement('a')
      link.href = `${subtask.ossUrl}`

      link.download = subtask.fileName || 'download.pdf'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

    // 下载全部文件
    async downloadAllFiles(){
      if (!this.xmxx.id) return

      this.downloadLoading = true
      try {
        const link = document.createElement('a')
        link.href = `/api/generate/serializeProcesses/download/exam/${this.xmxx.id}/zip`
        link.download = `考试${this.xmxx.id}_PDF文件包.zip`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.$message.success('开始下载文件包')
      } catch (error) {
        this.$message.error('下载失败')
        console.error('下载失败:', error)
      } finally {
        this.downloadLoading = false
      }
    },

    // 表格选择变化
    handleSelectionChange(selection){
      this.selectedTasks = selection
    },

    // 分页相关
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.loadTaskStats()
    },

    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.loadTaskStats()
    },

    // 工具函数
    formatFileSize(bytes){
      if (!bytes || bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },

    formatDateTime(dateTime){
      if (!dateTime) return '-'
      return new Date(dateTime).toLocaleString('zh-CN')
    },

    calculateDuration(startTime, endTime){
      if (!startTime || !endTime) return '-'
      const start = new Date(startTime)
      const end = new Date(endTime)
      const diff = end - start
      const minutes = Math.floor(diff / 60000)
      const seconds = Math.floor((diff % 60000) / 1000)
      return `${minutes}分${seconds}秒`
    },

    // 开始生成
    async startGenerate(){
       this.$alert('是否开始生成PDF', '提示', {
          confirmButtonText: '确定',
          callback: async action => {
            try {
              this.loadTaskStats()
              await startGeneratePdfBatch({
                examId: this.xmxx.id
              })
              this.$message.success('开始生成PDF')
              this.loadTaskStats()
            } catch (error) {
              this.$message.error('生成失败')
              console.error('生成失败:', error)
            }
          }
        });
    },
    // 状态相关函数
    getTaskTypeName(type){
      const typeMap = {
        'JOINT_EXAM_OVERVIEW': '联考总览',
        'JOINT_EXAM_SUBJECT': '联考单学科',
        'SCHOOL_REPORT': '单校报告',
        'BATCH_GENERATION': '批量生成',
        'JOINT_EXAM_SUBJECT_REPORT': '联考单学科报告',
        'SUBJECT_REPORT': '单学科报告'
      }
      return typeMap[type] || type
    },

    getTaskTypeTagType(type){
      const typeMap = {
        'JOINT_EXAM_OVERVIEW': 'primary',
        'JOINT_EXAM_SUBJECT': 'success',
        'SCHOOL_REPORT': 'warning',
        'BATCH_GENERATION': 'info'
      }
      return typeMap[type] || 'default'
    },

    getStatusName(status){
      const statusMap = {
        'PENDING': '等待中',
        'PROCESSING': '进行中',
        'COMPLETED': '已完成',
        'FAILED': '失败'
      }
      return statusMap[status] || status
    },

    getStatusTagType(status){
      const statusMap = {
        'PENDING': 'info',
        'PROCESSING': 'warning',
        'COMPLETED': 'success',
        'FAILED': 'danger'
      }
      return statusMap[status] || 'default'
    },

    getProgressStatus(status){
      if (status === 'COMPLETED') return 'success'
      if (status === 'FAILED') return 'exception'
      return null
    },

    getStepStatusName(status){
      const statusMap = {
        'PENDING': '等待中',
        'PROCESSING': '进行中',
        'COMPLETED': '已完成',
        'FAILED': '失败'
      }
      return statusMap[status] || status
    },

    getStepStatusTagType(status){
      const statusMap = {
        'PENDING': 'info',
        'PROCESSING': 'warning',
        'COMPLETED': 'success',
        'FAILED': 'danger'
      }
      return statusMap[status] || 'default'
    },

    getStepTimelineType(status){
      const statusMap = {
        'PENDING': 'primary',
        'PROCESSING': 'warning',
        'COMPLETED': 'success',
        'FAILED': 'danger'
      }
      return statusMap[status] || 'primary'
    },

    getSubtaskStatusName(status){
      const statusMap = {
        'PENDING': '等待中',
        'PROCESSING': '进行中',
        'COMPLETED': '已完成',
        'FAILED': '失败'
      }
      return statusMap[status] || status
    },

    getSubtaskStatusTagType(status){
      const statusMap = {
        'PENDING': 'info',
        'PROCESSING': 'warning',
        'COMPLETED': 'success',
        'FAILED': 'danger'
      }
      return statusMap[status] || 'default'
    },
  },

}
</script>

<style scoped>
.pdf-generation-stats {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.exam-selector {
  margin-bottom: 20px;
}

.total-stats,
.file-stats {
  margin-bottom: 20px;
}

.stats-card {
  height: 100%;
}

.stats-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.stats-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-icon.completed {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-icon.processing {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-icon.failed {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stats-icon.files {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stats-icon.size {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.stats-icon.average {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.stats-content {
  flex: 1;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
}

.task-list {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.task-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.steps-section {
  margin-top: 20px;
}

.steps-section h4 {
  margin-bottom: 15px;
  color: #303133;
}

.step-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.step-duration {
  font-size: 12px;
  color: #909399;
}

.step-error {
  margin-top: 10px;
  padding: 8px;
  background-color: #fef0f0;
  border-radius: 4px;
}

.subtask-files {
  margin-top: 20px;
}

.subtask-files h4 {
  margin-bottom: 15px;
  color: #303133;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
  color: #909399;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-table .el-table__row:hover > td) {
  background-color: #f5f7fa;
}
</style>
